<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <style type="text/css">
    body {
      text-align: center;
    }

    #small {
      margin-top: 150px;
    }

    #showBig {
      position: absolute;
      display: none;
    }
  </style>
  <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#small").on("mouseover mousemove mouseout", function(event) {
        if (event.type == "mouseover") {
          $("#showBig").show()
        } else if (event.type == "mouseout") {
          $("#showBig").hide()
        }else if(event.type == "mousemove"){
          $("#showBig").offset({
            left:event.pageX+10,
            top:event.pageY+10
          })
        }

      })
    });
  </script>
</head>
<body>

<img id="small" src="img/small.jpg"/>

<div id="showBig">
  <img src="img/big.jpg">
</div>

</body>
</html>
